<template>
    <div class="user">
       <div class="user_top">
           <p class="user_text right" >
             <img src="http://stnz.oss-cn-hangzhou.aliyuncs.com/img/user/xiaoxi.png" >
             <img src="http://stnz.oss-cn-hangzhou.aliyuncs.com/img/user/set.png" class="righ_user" @click="SetUp()">
           </p>
         <!--未登陆显示-->
         <div class="user_one_li clearfix" v-show="showname">
         <div class="user_login" @click="getLogin()">
         <button>登 录</button>
         </div>
         </div>
         <!--登陆后显示-->
         <div class="user_two_li" v-if="USERINFO" v-show="showLogin">
            <div class="user_two_top" >
              <div class="user_two_div" @click="information()">
                <img :src="USERINFO.avatar ? USERINFO.avatar:'http://stnz.oss-cn-hangzhou.aliyuncs.com/img/user/bjpng.png'" class="user_two_img"/>
              </div>
              <div class="user_two_top_div">
                <p class="user_two_top_p">
                  <span>{{USERINFO.nickname}}</span>
                  <img src="http://stnz.oss-cn-hangzhou.aliyuncs.com/img/user/Agriculture_1.png"/>
                </p>
                <p class="user_two_p">ID：{{USERINFO.userId}}</p>
              </div>
            </div>
           <div class="user_two_bottom">
                  <ul>
                    <li @click="toMoney">
                      <p>零钱</p>
                      <p>{{USERINFO.money}}</p>
                    </li>
                    <li @click="toIntegration">
                      <p>积分</p>
                      <p>{{USERINFO.integration}}</p>
                    </li>
                    <li @click="toSTC">
                      <p>搜了贝</p>
                      <p>{{USERINFO.stc}}</p>
                    </li>
                  </ul>
           </div>
         </div>
       </div>

      <!--<mt-navbar v-model="selected">-->
        <!--<mt-tab-item id="1">-->
          <!--农庄订单-->
         <!--<p class="title_p">（共享农场，农家餐饮，旅游景点，民宿客栈）</p>-->
        <!--</mt-tab-item>-->
        <!--<mt-tab-item id="2">农贸订单</mt-tab-item>-->
      <!--</mt-navbar>-->
      <!--<mt-tab-container v-model="selected">-->
        <!--<mt-tab-container-item id="1">-->
          <!--<div class="user_con">-->
            <!--<div class="user_con_left">-->
              <!--<ul class="clearfix">-->
                <!--<li v-for="(item,index) in OrdersList" @click="toRecord(item)">-->
                  <!--<div class="yuo_rela" >-->
                    <!--<div class="small" v-if="item.number"><span>{{item.number}}</span></div>-->
                    <!--<img :src="item.img"/>-->
                  <!--</div>-->
                  <!--<p>{{item.title}}</p>-->
                <!--</li>-->
              <!--</ul>-->
            <!--</div>-->
            <!--<div class="uobs_cont">-->
              <!--<div class="myri_side">-->
                <!--<img src="http://stnz.oss-cn-hangzhou.aliyuncs.com/img/user/use.png"/>-->
              <!--</div>-->
              <!--<div class="myri_cont" @click="toRecordAllOrders()">-->
                <!--<img src="../../../static/img/user/5.png"/>-->
                <!--<p class="all_order">全部订单</p>-->
              <!--</div>-->
            <!--</div>-->
          <!--</div>-->
        <!--</mt-tab-container-item>-->
        <!--<mt-tab-container-item id="2">-->
          <!--<div class="user_con">-->
            <!--<div class="user_con_left">-->
              <!--<ul class="clearfix">-->
                <!--<li v-for="(item,index) in Orders" @click="toDetail(item)">-->
                  <!--<div class="yuo_rela" >-->
                    <!--<div class="small" v-if="item.number"><span>{{item.number}}</span></div>-->
                    <!--<img :src="item.img"/>-->
                    <!--&lt;!&ndash;<div class="uo_sums">{{item.number}}</div>&ndash;&gt;-->
                  <!--</div>-->
                  <!--<p>{{item.title}}</p>-->
                <!--</li>-->
              <!--</ul>-->
            <!--</div>-->
            <!--<div class="uobs_cont">-->
              <!--<div class="myri_side">-->
                <!--<img src="http://stnz.oss-cn-hangzhou.aliyuncs.com/img/user/use.png"/>-->
              <!--</div>-->
              <!--<div class="myri_cont" @click="AllOrders()">-->
                <!--<img src="http://stnz.oss-cn-hangzhou.aliyuncs.com/img/user/user (4).png"/>-->
                <!--<p class="all_order">全部订单</p>-->
              <!--</div>-->
            <!--</div>-->
          <!--</div>-->
        <!--</mt-tab-container-item>-->
      <!--</mt-tab-container>-->



      <div class="user_foot">
        <ul class="user_ul">
          <li>
            <router-link to="/Collection">
            <div class="clea_side"><img src="http://stnz.oss-cn-hangzhou.aliyuncs.com/img/user/user (1).png" class="fzf_con"></div>
            <div class="clea_cont">我的收藏</div>
            </router-link>
          </li>
          <li>
            <router-link to="/Merchant">
            <div class="clea_side"><img src="http://stnz.oss-cn-hangzhou.aliyuncs.com/img/user/user (2).png" class="fzf_con"></div>
            <div class="clea_cont">商家入驻</div>
            </router-link>
          </li>
          <li>
            <router-link to="/myRecommended">
            <div class="clea_side"><img src="http://stnz.oss-cn-hangzhou.aliyuncs.com/img/user/money.png" class="fzf_con"></div>
            <div class="clea_cont">我的推荐</div>
            </router-link>
          </li>
        </ul>
      </div>
      <appFooter :active="4"></appFooter>
    </div>
</template>

<script>
  import appFooter from '@/components/appFooter.vue'
    export default {
      name: "user",
      data(){
        return{
          USERINFO:[],
          list:[],
         // Orders:[
         //    {
         //      img:'http://stnz.oss-cn-hangzhou.aliyuncs.com/img/user/user(5).png',
         //      number:'',
         //      title:'待付款',
         //      id:1,
         //    },
         //    {
         //      img:'http://stnz.oss-cn-hangzhou.aliyuncs.com/img/user/user(6).png',
         //      number:'',
         //      title:'待发货',
         //      id:2,
         //    },
         //    {
         //      img:'http://stnz.oss-cn-hangzhou.aliyuncs.com/img/user/user(7).png',
         //      number:'',
         //      title:'待收货',
         //      id:3,
         //    },
         //    {
         //      img:'http://stnz.oss-cn-hangzhou.aliyuncs.com/img/user/user(8).png',
         //      number:'',
         //      title:'待评价',
         //      id:4,
         //    }
         //  ],
         //  OrdersList:[
         //    {
         //      img:'http://stnz.oss-cn-hangzhou.aliyuncs.com/img/user/1.png',
         //      number:'',
         //      title:'待付款',
         //      id:0,
         //    },
         //    {
         //      img:'http://stnz.oss-cn-hangzhou.aliyuncs.com/img/user/2.png',
         //      number:'',
         //      title:'待使用',
         //      id:1,
         //    },
         //    {
         //      img:'http://stnz.oss-cn-hangzhou.aliyuncs.com/img/user/3.png',
         //      number:'',
         //      title:'取消单',
         //      id:2,
         //    },
         //    {
         //      img:'http://stnz.oss-cn-hangzhou.aliyuncs.com/img/user/4.png',
         //      number:'',
         //      title:'待评价',
         //      id:3,
         //    }
         //  ],

           showname:true,//判断是否登陆
           showLogin:false,//判断是否登陆
           selected:'1',
        }
      },
      computed:{
      },
      components: {
       appFooter
      },
      methods: {
        //跳转登陆页面
        getLogin: function () {
          localStorage.setItem('beforeLoginUrl',"user");
          this.$router.push({path:'/login'})
        },
        SetUp: function () {
          this.$router.push({path:'/SetUp'})
        },
        AllOrders: function () {
          sessionStorage.setItem("userList",'');
            this.$router.push({path:'/AllOrders'})
        },
        toDetail(item) {
          sessionStorage.setItem("userList",item.id);
          this.$router.push({path: '/AllOrders'})
        },
        toRecord(item) {
          sessionStorage.setItem("userRecord",item.id);
          this.$router.push({path: '/MyRecord'})
        },
        toRecordAllOrders: function () {
          sessionStorage.setItem("userRecord",'');
          this.$router.push({path:'/MyRecord'})
        },
        information:function () {
          this.$router.push({path:'/edit'})
        },

        //获取用户信息
        async getUserInfo(){

          var list=JSON.parse(localStorage.getItem('userInfo')|| '[]')
          this.list=list
          var userId=list.userId
          if(!userId){
            this.showname=true
            this.showLogin=false
          }else {
            this.showname=false
            this.showLogin=true
            let params = {
              user_Id:userId
            };
            const res = await this.$axios.post(this.$api.userIndexData, params);
            if (res.success) {
              this.USERINFO = res.data
              if(this.USERINFO.OrderStatus.PendingPayment){
                this.Orders[0].number=this.USERINFO.OrderStatus.PendingPayment
              }
              if(this.USERINFO.OrderStatus.PendingDelivery){
                this.Orders[1].number=this.USERINFO.OrderStatus.PendingDelivery
              }
              if(this.USERINFO.OrderStatus.PendingGoodsReceived){
                this.Orders[2].number=this.USERINFO.OrderStatus.PendingGoodsReceived
              }
              if(this.USERINFO.OrderStatus.ToBeEvaluated){
                this.Orders[3].number=this.USERINFO.OrderStatus.ToBeEvaluated
              }
            } else {
              this.$toast(res.msg);
            }
          }
        },
        toMoney(){
          this.$router.push({
            path:'/changeDetail',
            query:{
              active:0,
              userid:this.USERINFO.userId,
              money:this.USERINFO.money,
              integration:this.USERINFO.integration,
              stc:this.USERINFO.stc,
              lockSTC:this.USERINFO.lockSTC,
              unlockSTC:this.USERINFO.unlockSTC
            }
          })
        },
        toIntegration(){
          this.$router.push({
            path:'/changeDetail',
            query:{
              active:1,
              userid:this.USERINFO.userId,
              money:this.USERINFO.money,
              integration:this.USERINFO.integration,
              stc:this.USERINFO.stc,
              lockSTC:this.USERINFO.lockSTC,
              unlockSTC:this.USERINFO.unlockSTC
            }
          })
        },
        toSTC(){
          this.$router.push({
            path:'/changeDetail',
            query:{
              active:2,
              userid:this.USERINFO.userId,
              money:this.USERINFO.money,
              integration:this.USERINFO.integration,
              stc:this.USERINFO.stc,
              lockSTC:this.USERINFO.lockSTC,
              unlockSTC:this.USERINFO.unlockSTC
            }
          })
        },

      },
      mounted () {
        this.getUserInfo()
      },
      created:function () {
        setTitle('个人中心')
      }
    }
</script>

<style scoped>
  @import '../../assets/css/index.css';
  .mint-navbar .mint-tab-item.is-selected {
    border-bottom: 3px solid #01bf47!important;
    color:#01bf47;
    margin-bottom: 0;
  }
  .mint-navbar .mint-tab-item {
    padding: 10px 0;
    font-size: 15px;
  }
  .mint-navbar .mint-tab-item:nth-child(2) {
    padding: 17px 0 5px;
    font-size: 15px;
  }
  .title_p{font-size: 0.1rem;color: #8c8c8c;padding-top: 0.04rem;width: 2.1rem;}
</style>
